<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>Register</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<br>
<div align="center">
    <table>
        <tr>
            <td align="right">邮箱：</td>
            <td><input name="email" type="text" id="email"/></td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td><input name="password" type="password" id="password"/></td>
        </tr>
        <tr>
            <td align="right">确认密码：</td>
            <td><input name="password_confirm" type="password" id="password_confirm"/></td>
        </tr>
        <tr>
            <td align="right">验证码：</td>
            <td><input name="code" type="text" id="code"/></td>
            <td>
                <button class="btn-success btn btn-primary btn-sm" id="getCode" type="button">获取验证码</button>
            </td>
        </tr>
    </table>
    <button class="btn btn-primary" type="submit" id="submit">注册</button>
</div>
</body>
<script type="text/javascript">
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    var getCode;

    function registerUser() {
        var email = $('#email').val();
        var password = $('#password').val();
        var password_confirm = $('#password_confirm').val();
        var code = $('#code').val();
        if( email == "" || password == "" || code == ""){
            alert("请输入邮箱、密码、验证码");
            return;
        }
        if( password != password_confirm ){
            alert("两次密码不相同，请确认");
            return;
        }
        $.ajax({
            method: "POST",
            url: 'http://www.test.com/api/user/register/' + email +'/'+ password + '/' + code,
            data: {}
        }).done(function (data, textStatus) {
            if( data.status != 0 ){
				if(typeof (data.message) == "undefined"){
					alert(data);
				}else{
				    alert(data.message);
				}
             } else {
                window.location.replace("http://www.test.com/static/welcome.html");
            }
        }).fail(function (jqXHR, textStatus) {
            alert("Request failed: " + jqXHR.statusText);
        })
    }

    $(function () {
        getCode = $("#getCode");
        getCode.click(sendMessage);
        $("#submit").click(registerUser)
    });

    function sendMessage() {
        var email = $('#email').val();
        if( email == "" ){
            alert("请输入邮箱");
            return;
        }
        curCount = count;
        //设置button效果，开始计时
        getCode.attr("disabled", "true");
        getCode.text("获取验证码(" + curCount + ")");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
        //向后台发送处理数据
        $.ajax({
            method: "POST",
            url: 'http://www.test.com/api/code/create/' + email,
            data: {}
        }).done(function (data, textStatus) {
            if(data==true){
                alert("发送成功!");
            } else {
                alert(data);
            }
        }).fail(function (jqXHR, textStatus) {
            alert("Request failed: " + jqXHR.statusText);
        })
    }

    function SetRemainTime() {
        curCount--;
        getCode.text("获取验证码(" + curCount + ")");
        if (curCount <= 0) {
            window.clearInterval(InterValObj);//停止计时器
            getCode.removeAttr("disabled");//启用按钮
            getCode.text("获取验证码");
        }
    }

    function reSetRemainTime() {
        curCount = 0
        window.clearInterval(InterValObj);//停止计时器
        getCode.removeAttr("disabled");//启用按钮
        getCode.text("获取验证码");
    }
</script>
</html>